<template>
  <!--  TODO:和客户阶段办理页面/功能/组件一模一样,复制粘贴的目前没有封装   -->
  <!--  流程任务待办 start  -->
  <div class="client-stage-drawer">
    <el-dialog v-model="isHandleDrawer" width="1000" @close="handelCloseForm" :close-on-click-modal="false" destroy-on-close>
      <div class="stage-intention">
        <title-view :title="stageNameDrawer" />
        <div class="opt-instructions" ref="instructionsTitle">
          <el-icon><QuestionFilled /></el-icon>
          <span @click="instructionDialog = true">操作说明</span>
          <!--          <Transition name="fade" v-if="instructionDialog">-->
          <!--            <div class="instructions-container" v-show="(instructionDialog = true)">-->
          <!--              <div class="arrow"></div>-->
          <!--              <title-view title="操作说明" isClose @close="instructionDialog = false" />-->
          <!--              <div class="editor-container" v-html="instructionsText"></div>-->
          <!--            </div>-->
          <!--          </Transition>-->
        </div>
        <div class="state-forms" v-loading="formRenderLoading" element-loading-text="数据加载中...">
          <template v-if="formItemsData.length">
            <FormRender ref="formRenderRef" :forms="formItemsData" v-model="formModelData" />
          </template>
          <template v-else>
            <el-empty />
          </template>
        </div>
        <div class="state-btns">
          <el-button style="width: 92px; background-color: #f2f3f5" @click="handelCloseForm" size="default">取消</el-button>
        </div>
      </div>
      <div class="stage-follow-up" v-loading="isStateFollowLoading" element-loading-text="数据加载中...">
        <title-view title="跟进内容" />
        <el-timeline style="max-width: 600px" :hollow="true" :class="{ 'hide-left-line': !followUpData.length }">
          <template v-if="followUpData.length">
            <el-timeline-item v-for="item in followUpData" type="primary">
              <div class="timeline-date">
                <span class="date">{{ followDate(item.trackDatetime).value }}</span>
                <span class="time">
                  <el-icon><Clock /></el-icon>
                  {{ followtime(item.trackDatetime).value }}
                </span>
              </div>
              <div>
                <div class="timeline-title">{{ item.trackTypeName }}</div>
                <div class="timeline-desc">
                  <div class="timeline-desc-content">
                    {{ item.contentDesc }}
                  </div>
                  <div class="timeline-desc-images">
                    <el-image
                      :preview-src-list="[imgItem.url]"
                      v-for="imgItem in item.crmFileVOList"
                      :key="imgItem.url"
                      :src="imgItem.url"
                    ></el-image>
                  </div>
                  <div class="timeline-desc-name">{{ item.roleName }}</div>
                </div>
              </div>
            </el-timeline-item>
          </template>
          <el-empty v-else />
        </el-timeline>
      </div>
    </el-dialog>
  </div>
  <!--  流程任务待办 end  -->
  <!--  start 操作说明-->
  <el-dialog v-model="instructionDialog" title="操作说明" width="500">
    <div v-html="instructionsText"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="instructionDialog = false">取消</el-button>
        <el-button type="primary" @click="instructionDialog = false"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <!--  end 操作说明-->
</template>
<script setup>
import FormRender from "@/components/customComponents/formRender.vue";
import { Clock, QuestionFilled } from "@element-plus/icons-vue";
import { clientInfoAndFollow } from "@/apis/clientManager";
import { approvalForm } from "@/apis/workflow";
import { isHasFile } from "@/utils";
import { computed, ref } from "vue";
import useComputedParams from "@/hooks/useComputedParams";
import { dayjs } from "element-plus";

const props = defineProps(["currentFormParams", "modelValue"]);
let $emit = defineEmits(["update:modelValue"]);

const isHandleDrawer = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit("update:modelValue", val);
  }
});

const followtime = useComputedParams(time => {
  return dayjs(time).format("hh:mm:ss");
});
const getClientInfoAndFollow = customerId => {
  isStateFollowLoading.value = true;
  clientInfoAndFollow(customerId)
    .then(res => {
      const crmCustomerTrackList = res.data?.crmCustomerTrackList || [];
      followUpData.value = crmCustomerTrackList.map(item => {
        item.roleName = `${item.roleName}  ${item.updateBy}提交于${item?.updateTime ? dayjs(item.updateTime).format("HH:mm") : ""}`;
        fllowUpTypes.value.some(subItem => {
          if (item.trackType === subItem.dictCode) {
            item.trackTypeName = subItem.dictLabel;
            return true;
          }
        });
        return item;
      });
      isStateFollowLoading.value = false;
    })
    .catch(err => {
      isStateFollowLoading.value = false;
    });
};
const getAuditAndToDoData = async () => {
  try {
    formRenderLoading.value = true;
    const { data } = await approvalForm(customFormInstanceId.value);
    formRenderLoading.value = false;
    formItemsData.value = isHasFile(data?.formItems ?? [], data?.formData ?? {});
    if (isDisableFollowUp.value) {
      formItemsData.value.forEach(item => {
        item.props.disabled = true;
      });
    }
    formModelData.value = data?.formData || {};
  } catch (err) {
    formRenderLoading.value = false;
  }
};

/**
 * 办理/客户跟进弹窗
 */
const customFormInstanceId = ref(""); // 表单实例id
const formRenderLoading = ref(false);
const isStateFollowLoading = ref(false);
const followUpData = ref([]);
const fllowUpTypes = ref([]);
const formItemsData = ref([]);
const formModelData = ref({});
const defId = ref(""); // 表单defId
const isDisableFollowUp = ref(false);
const stageNameDrawer = ref("");
const instructionsText = ref("");

const { formId, formInstanceId, taskName, customerId, remark } = props.currentFormParams;
isDisableFollowUp.value = true;
defId.value = formId; // 表单defId
customFormInstanceId.value = formInstanceId; // 表单实例id
stageNameDrawer.value = taskName;
instructionsText.value = remark || "暂无数据";
getClientInfoAndFollow(customerId);
customFormInstanceId.value && getAuditAndToDoData();

const handelCloseForm = () => {
  isHandleDrawer.value = false;
};

/**
 * 操作说明
 */
const instructionDialog = ref(false);
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.client-stage-drawer {
  :deep(.el-dialog__body) {
    @include mixin.flex;
    height: 600px;
    padding: 0;
  }
  .stage-intention,
  .stage-follow-up {
    width: 50%;
    height: 100%;
    padding: 24px 20px;
    box-sizing: border-box;
  }

  .stage-intention {
    border-right: 1px solid #dcdfe6;

    .opt-instructions {
      @include mixin.flex-align;
      margin: 24px 0 4px;
      font-size: 12px;
      color: #007dff;
      line-height: 22px;
      cursor: pointer;
      span {
        margin-left: 5px;
      }
    }
    .state-forms {
      position: relative;
      width: 410px;
      height: 85%;
      padding: 20px 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
      overflow-y: auto;
      background-color: #f6f8fa;
      border: 1px solid #dcdfe6;
      :deep(.el-empty) {
        @include mixin.position-center;
      }
      :deep(.form-item-el) {
        width: 100%;
      }
    }
  }
  .stage-follow-up {
    overflow-y: auto;
    position: relative;
    :deep(.el-timeline) {
      padding-left: 0;
      margin-top: 24px;
    }
    :deep(.el-timeline-item__node--normal) {
      width: 6px;
      height: 6px;
      left: 2px;
    }
    .hide-left-line {
      :deep(.el-timeline-item > .el-timeline-item__tail) {
        border-left: none !important;
      }
    }
    .timeline-date {
      @include mixin.flex-align;
      .date {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.6);
        line-height: 24px;
      }
      .time {
        @include mixin.flex-align;
        font-size: 12px;
        color: #86909c;
        line-height: 24px;
        .el-icon {
          margin: 0 4px 0 8px;
        }
      }
    }
    .timeline {
      &-title {
        margin: 4px 0 10px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.9);
        line-height: 24px;
      }
      &-desc {
        padding: 10px;
        box-sizing: border-box;
        background-color: #f2f3f5;
        border-radius: 4px;
        &-content {
          margin-bottom: 4px;
          font-size: 14px;
          color: #3d3d3d;
          line-height: 24px;
        }
        &-images {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
          grid-gap: 10px;
          margin: 10px 0 20px;
          :deep(.el-image) {
            width: 100%;
            height: 80px;
            border-radius: 4px;
          }
        }
        &-name {
          font-size: 12px;
          color: #86909c;
          line-height: 24px;
        }
      }
    }
    .add-follow-up {
      @include mixin.flex-center();
      flex-direction: column;
      width: 100px;
      height: 100px;
      cursor: pointer;
      margin: 8px 8px 8px 0;
      border: 1px solid #cdd0d6;
      background-color: #fafafa;
      :deep(.el-icon) {
        font-size: 28px;
        color: #909399;
      }
      span {
        margin-top: 10px;
        font-size: 12px;
        color: #86909c;
        line-height: 24px;
      }
    }
  }
}
</style>
